<script lang="ts" setup>
import { onMounted, ref } from "vue";
onMounted(() => {
  props.beforeOpen &&
    props.beforeOpen().then(() => {
      visible.value = true;
    });
});
const props = defineProps({
  _visible: {
    type: Boolean,
    default() {
      return false;
    },
  },
  _leaveHook: {
    type: Function,
  },
  title: {
    type: String,
    default() {
      return "未填写";
    },
  },
  beforeOpen: {
    type: Function,
  },
});
let visible = ref(props.beforeOpen ? false : props._visible);
const _onAfterLeave = (el: Element): void => {
  props._leaveHook && props._leaveHook();
};
</script>

<template>
  <transition name="dialog_fade" @after-leave="_onAfterLeave">
    <div class="dialog_mask dialog_mask--center" @click="visible = false" v-if="visible">
      <div class="dialog_container" @click.stop>
        <div class="container_header">
          <div class="header_left">
            <span>{{ title }}</span>
          </div>
          <div class="header_right">
            <div class="right_close">
              <i class="iconfont icon-guanbi"></i>
            </div>
          </div>
        </div>
        <div class="container_main">
          <slot></slot>
        </div>
        <div class="container_footer">
          <div class="footer_right">
            <div class="right_cancel">
              <span>取消</span>
            </div>
            <div class="right_confirm"><span>确定</span></div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<style lang="less">
.dialog_mask {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background: RGBA(0, 0, 0, 0.5);
  &--center {
    .dialog_container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      .container_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        padding: 0 20px;
        color: @title-color;
        .header_right {
          .right_close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            i {
              font-size: 25px;
            }
            &:hover {
              cursor: pointer;
            }
          }
        }
      }
      .container_main {
        min-width: 500px;
        min-height: 200px;
      }
      .container_footer {
        display: flex;
        justify-content: flex-end;
        height: 60px;
        padding: 0 20px;
        .footer_right {
          display: flex;
          .right_cancel,
          .right_confirm {
            display: flex;
            align-items: center;
            height: 40px;
            box-sizing: border-box;
            padding: 0 20px;
            &:hover {
              cursor: pointer;
            }
          }
          .right_cancel {
            margin-right: 20px;
            border: 1px solid @border-color-base;
          }
          .right_confirm {
            background: @primary-color;
            color: white;
          }
        }
      }
    }
  }
  &_fade-enter-active,
  &_fade-leave-active {
    transition: opacity 0.4s;
  }

  &_fade-enter,
  &_fade-leave-to {
    opacity: 0;
  }
}
</style>
